<!--用户管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;float: left">应聘者信息</span>
    <el-button @click="dialogVisibleUser=true" type="primary" color="#5B63B7"
               style="float:right;margin-top:13px;">新建应聘者</el-button>
  </div>

  <!-- 新增应聘者弹窗 -->
  <el-dialog :title="dialogTitleUser" style="width:600px;padding:40px;" v-model="dialogVisibleUser" :before-close="handleCloseUser">
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <!--          <p><span class="tips-must-do">*</span>身份</p>-->
          <el-form-item label="*身份">
            <el-select placeholder="请选择身份" v-model="saveUserForm.identityId">
              <el-option v-for="item in identityOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <el-input placeholder="请输入真实姓名" v-model="saveUserForm.realName" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="saveUserForm.nickname" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*微信号">
            <el-input placeholder="请输入微信号" v-model="saveUserForm.wechatId" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender" :disabled="saveUserForm.identityId==20">
              <el-radio value="男" border style="margin: 0;">男</el-radio>
              <el-radio value="女" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    ---------------------------------------------------------------------------------------------------------------
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="身份">
            <el-select placeholder="请选择身份" v-model="saveUserForm.identity" :disabled="saveUserForm.identityId==20">
              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="求职状态">
            <el-input placeholder="请输入求职状态" v-model="saveUserForm.lookforStatus" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="出生地">
            <el-input placeholder="请输入出生地" v-model="saveUserForm.birthdayPlace" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="个人优势">
            <el-input placeholder="请输入个人优势" v-model="saveUserForm.personalAdvantage" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="期望岗位">
            <el-input placeholder="请输入期望岗位" v-model="saveUserForm.expectedJob" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望城市">
            <el-input placeholder="请输入期望城市" v-model="saveUserForm.expectedCity" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="最低期望薪资">
            <el-input placeholder="请输入最低期望薪资" v-model="saveUserForm.expectedSalaryMin" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高期望薪资">
            <el-input placeholder="请输入最高期望薪资" v-model="saveUserForm.expectedSalaryMax" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="主修专业">
            <el-input placeholder="请输入主修专业" v-model="saveUserForm.major" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学位">
            <el-input placeholder="请输入学位" v-model="saveUserForm.degree" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="教育背景">
            <el-input placeholder="请输入教育背景" v-model="saveUserForm.educationBackground" :disabled="saveUserForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*雇佣类型">
            <el-select placeholder="请选择雇佣类型" v-model="saveUserForm.employmentType" :disabled="saveUserForm.identityId==20">
              <el-option v-for="item in OptionStatus" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*毕业时间">
            <div class="demo-datetime-picker">
              <div class="block">
                <el-date-picker
                    v-model="saveUserForm.graduateTime"
                    :disabled="saveUserForm.identityId==20"
                    type="date"
                    placeholder="请选择毕业时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期">
            <div class="demo-datetime-picker">
              <div class="block">
                <el-date-picker
                    v-model="saveUserForm.birthday"
                    :disabled="saveUserForm.identityId==20"
                    type="date"
                    placeholder="请选择出生年月"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="预计可到岗日期">
            <div class="demo-datetime-picker">
              <div class="block">
                <el-date-picker
                    v-model="saveUserForm.availableStartDate"
                    :disabled="saveUserForm.identityId==20"
                    type="date"
                    placeholder="请选择预计可到岗日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button  @click="handleCloseUser()" style="color: #5B63B7;" class="custom-hover-color">取消</el-button>
      <el-button type="primary" color="#5B63B7" @click="saveUser()" :disabled="saveUserForm.identityId==20">保存</el-button>
    </template>
  </el-dialog>



  <!-- 编辑应聘者弹窗 -->
  <el-dialog :title="dialogTitle" style="width:600px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="身份">
            <el-select placeholder="请选择身份" v-model="saveSeekerForm.identity">
              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="求职状态">
            <el-input placeholder="请输入求职状态" v-model="saveSeekerForm.lookforStatus"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="出生地">
            <el-input placeholder="请输入出生地" v-model="saveSeekerForm.birthdayPlace"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="个人优势">
            <el-input placeholder="请输入个人优势" v-model="saveSeekerForm.personalAdvantage"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="期望岗位">
            <el-input placeholder="请输入期望岗位" v-model="saveSeekerForm.expectedJob"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望城市">
            <el-input placeholder="请输入期望城市" v-model="saveSeekerForm.expectedCity"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="最低期望薪资">
            <el-input placeholder="请输入最低期望薪资" v-model="saveSeekerForm.expectedSalaryMin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高期望薪资">
            <el-input placeholder="请输入最高期望薪资" v-model="saveSeekerForm.expectedSalaryMax"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="主修专业">
            <el-input placeholder="请输入主修专业" v-model="saveSeekerForm.major"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学位">
            <el-input placeholder="请输入学位" v-model="saveSeekerForm.degree"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="教育背景">
            <el-input placeholder="请输入教育背景" v-model="saveSeekerForm.educationBackground"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="雇佣类型">
            <el-select placeholder="请选择雇佣类型" v-model="saveSeekerForm.employmentType">
              <el-option v-for="item in OptionStatus" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="毕业时间">
                <div class="demo-datetime-picker">
                  <div class="block">
                    <el-date-picker
                        v-model="saveSeekerForm.graduateTime"
                        type="date"
                        placeholder="请选择毕业时间"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                    />
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期">
              <div class="demo-datetime-picker">
                <div class="block">
                  <el-date-picker
                      v-model="saveSeekerForm.birthday"
                      type="date"
                      placeholder="请选择出生年月"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                  />
                </div>
              </div>
              </el-form-item>
            </el-col>
          </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="预计可到岗日期">
            <div class="demo-datetime-picker">
              <div class="block">
                <el-date-picker
                    v-model="saveSeekerForm.availableStartDate"
                    type="date"
                    placeholder="请选择预计可到岗日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button  @click="handleClose()" style="color: #5B63B7;" class="custom-hover-color">取消</el-button>
      <el-button type="primary" color="#5B63B7" @click="saveSeeker()">保存</el-button>
    </template>
  </el-dialog>

  <!-- 应聘者查询卡片 -->
  <el-card style="margin:20px;height: 120px;">
    <el-form :inline="true">
      <el-form-item label="身份搜索" style="width:290px;float: left">
        <el-select placeholder="请选择用户身份"
                   v-model="searchSeekerForm.identity" @change="loadSeeker">
          <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="期望岗位" style="float: left">
        <el-input placeholder="输入期望岗位" style="width:220px;"
                  v-model="searchSeekerForm.expectedJob" @keydown.enter="loadSeeker"></el-input>
      </el-form-item>
      <el-form-item label="期望城市" style="float: left">
        <el-input placeholder="输入期望城市" style="width:220px;"
                  v-model="searchSeekerForm.expectedCity" @keydown.enter="loadSeeker"></el-input>
      </el-form-item>
      <el-form-item label="雇佣类型" style="width:290px;float: left">
        <el-select placeholder="请选择雇佣类型"
                   v-model="searchSeekerForm.employmentType" @change="loadSeeker">
          <el-option v-for="item in OptionStatus" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业" style="float: left">
        <el-input placeholder="输入专业" style="width:220px;"
                  v-model="searchSeekerForm.major" @keydown.enter="loadSeeker"></el-input>
      </el-form-item>
      <el-form-item style="float: left;">
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadSeeker" color="#5B63B7">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 用户信息表格 -->
  <el-card style="margin:20px;">
    <el-table :data="seekerArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="identity" label="身份" align="center"/>
      <el-table-column prop="username" label="用户名" align="center"/>
      <el-table-column prop="lookforStatus" label="求职状态" align="center"/>
      <el-table-column prop="graduateTime" label="毕业时间" align="center"/>
      <el-table-column prop="expectedJob" label="期望岗位" align="center"/>
      <el-table-column prop="expectedCity" label="期望城市" align="center"/>
      <el-table-column prop="expectedSalaryMin" label="最低期望薪资" align="center"/>
      <el-table-column prop="expectedSalaryMax" label="最高期望薪资" align="center"/>
      <el-table-column prop="employmentType" label="雇佣类型" align="center"/>
      <el-table-column prop="educationBackground" label="教育背景" align="center"/>
      <el-table-column prop="major" label="专业" align="center"/>
      <el-table-column prop="degree" label="学位" align="center"/>
      <el-table-column prop="status" label="用户状态" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editSeeker(scope.row.id)" :disabled="scope.row.status=='注销'" style="color:#5B63B7">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteSeeker(scope.row.id)" :disabled="scope.row.status=='注销'" style="color:#5B63B7">注销</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//控制新增用户弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('编辑应聘者');
//控制新增用户弹窗是否显示
const dialogVisibleUser = ref(false);
//定义变量控制dialog的标题
const dialogTitleUser = ref('新建应聘者');
//用户职业
const levelOptions = ref([
  {label: '在校生',value: '在校生'},
  {label: '应届毕业生',value: '应届毕业生'},
])
//雇佣类型
const OptionStatus = ref([
  {label: '全职',value: '全职'},
  {label: '兼职',value: '兼职'},
  {label: '合同工',value: '合同工'},
  {label: '实习',value: '实习'},
])
const identityOptions = ref([
  {label: '求职者',value: '10'},
  {label: '招聘者',value: '20'},
])
//准备对象用来收集新增/修改员工的表单信息
const saveSeekerForm = ref({
  id:'',
  userId:'',
  username:'',
  identity: '',
  lookforStatus:'',
  personalAdvantage:'',
  graduateTime: '',
  birthday:'',
  birthdayPlace:'',
  expectedJob: '',
  expectedCity:'',
  expectedSalaryMin:'',
  expectedSalaryMax:'',
  employmentType:'',
  educationBackground:'',
  major:'',
  degree:'',
  availableStartDate:''
});

const saveUserForm = ref({
  userId:'',
  username: '',
  nickname:'',
  password:'',
  email: '',
  phone:'',
  realName:'',
  gender: '男',
  status:'',
  createTime:'',
  updateTime:'',
  identityId:'',
  wechatId:'',
  userImg:'',

  identity: '',
  lookforStatus:'',
  personalAdvantage:'',
  graduateTime: '',
  birthday:'',
  birthdayPlace:'',
  expectedJob: '',
  expectedCity:'',
  expectedSalaryMin:'',
  expectedSalaryMax:'',
  employmentType:'',
  educationBackground:'',
  major:'',
  degree:'',
  availableStartDate:''
});

//新增员工
const saveUser = () => {
  let data = JSON.stringify(saveUserForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/seeker/save',data, {
    headers: {
      'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
    }
  }).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功!');
      dialogVisibleUser.value = false;//关闭弹窗
      saveUserForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
      loadSeeker();//加载用户列表方法
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}


//新增员工
const saveSeeker = () => {
  let data = JSON.stringify(saveSeekerForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/seeker/save',data, {
    headers: {
      'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
    }
  }).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功!');
      dialogVisible.value = false;//关闭弹窗
      saveSeekerForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
      loadSeeker();//加载用户列表方法
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//实现取消按钮的功能
const handleClose = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisible.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveSeekerForm.value={};
  }
}

//实现取消按钮的功能
const handleCloseUser = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisibleUser.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveUserForm.value={};
  }
}

//定义数组用来装用户列表信息
const seekerArr = ref([]);
//定义对象保存查询条件
const searchSeekerForm = ref({personalAdvantage: '', identity: '',expectedJob:'',expectedCity:'',employmentType:'',major:''});
const loadSeeker = () => {
  //如果传入了查询条件，则根据条件查询，没有条件，默认查询所有员工信息
  let data = qs.stringify(searchSeekerForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/seeker/select?'+data).then((response) => {
    if (response.data.code === 2000) {
      seekerArr.value = response.data.data;
      console.log(seekerArr.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//页面一加载立即调用
onMounted(() => {
  searchSeekerForm.value={};
  loadSeeker();//加载员工列表
})

//重置用户搜索信息
const resetSearch = ()=>{
  searchSeekerForm.value={};
  loadSeeker();
}


//编辑员工
const editSeeker = (id) =>{
  console.log(id);
  //修改弹窗标题并打开弹窗
  dialogTitle.value = '编辑员工';
  dialogVisible.value = true;
  //根据id查询要修改的当前员工的信息
  axios.get(BASE_URL+'/v1/seeker/select?id='+id).then((response) => {
    if (response.data.code === 2000) {
      //若请求成功，赋值给saveUserForm，因为后端返回的是list，所以这里要data[0]
      saveSeekerForm.value = response.data.data[0];
      console.log(response.data.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//删除用户
const deleteSeeker = (id)=>{
  console.log(id);
  // if(confirm('您确认要注销此应聘者吗?')){
    axios.post(BASE_URL+'/v1/seeker/delete/'+id).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('注销成功!');
        loadSeeker();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  // }
}
</script>

<style scoped>
.custom-hover-color:hover {
  color: #5B63B7; /* 悬停时的文本颜色 */
  background-color: #f5f5f5;
  border-color: #cccccc;
}
/*出生日期*/
.demo-datetime-picker {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
</style>